<style lang="scss">
@import "./uv.scss";
</style>
<template>
  <div>
    <div class="common-bg" :style="{top: (statusBarHeight - 2) + 'px' }"></div>
    <div style="position: relative; z-index: 2;">
      <u-my-layOut :navbarOption="{ bgColor: 'rgba(255,255,255,0)', title: '商家列表' }" :color="{ statusBarHeightColor: '#f6a5ac' }">
        <template v-slot:header>
          <div class="pl30 pr30">
            <div style="height: 100rpx;  box-sizing: border-box;color: #333;">
              <u-my-input v-model="form.keywords" @clear="handleClear" placeholder="请输入手机号/姓名">
                <button @click="searchTap" class="fz30 p1757298517 common-button  pl0 pr0 ml0  mr0" style="color: #ffffff;background-color: #E60012;">搜索</button>
              </u-my-input>
            </div>
            <div class="p1757299303 " style="box-sizing: border-box;">
              <uv-tabs @click="tabTap" :customStyle="{ height: '80rpx' }" :scrollable="false" :inactiveStyle="{ color: '#999' }" :activeStyle="{ color: '#333' }" lineColor="#E60012" border :list="list"></uv-tabs>
            </div>
          </div>
        </template>
        <template v-slot:main>
          <div class="p1757296779 " style="height: 100%; overflow-y: auto;">
            <scroll-view scroll-anchoring :refresher-triggered="isRefreshing" :refresher-enabled="true" scroll-y scroll-top="0" @refresherrestore="onRefresherRestore" @refresherrefresh="bindrefresherrefresh" @scrolltolower="onReachBottom" style=" height:100%">
              <div class="p1757302886 f" v-for="(item, index) in tableData" :key="index">
                <div style="text-align: center;">
                  <uv-avatar :src="item.brand_logo" size="80rpx"></uv-avatar>
                </div>
                <div class="pt10" style="flex: 1;">
                  <div class="fz30 fac pl20" style="color: #3D3D3D;font-weight: 500;">{{ item.merchant_name }}
                  </div>
                  <div class="fz30 pt10 pl20 " style="color: #6B7280;">ID:{{ item.contacts_tel }}</div>
                  <button v-for="(i, iI) in item.community_list" :key="index + '-' + iI" class="fz26 p1757318941 common-button    mr0">{{ i.community_name }}</button>
                  <div class="p1757302879 pt20  f " style="color: #6B7280;">
                    <div class="p1757299982 " style="width: 50%;">
                      <div class="fz30 pt20">销售金额 <div class="fz30 p1757302159">¥{{ Number(item.sales_amount) || 0 }}
                        </div>
                      </div>
                      <div class="fz30 pt20">让利金额 <div class="fz30 p1757302159">¥{{ Number(item.rang_li_amount) || 0 }}
                        </div>
                      </div>
                    </div>
                    <div class="p1757299982 " style="width: 50%;">
                      <div class="fz30 pt20">销售笔数 <div class="fz30 p1757302159">{{ item.number_sales }}</div>
                      </div>
                      <div class="fz30 pt20">归属管家 <div class="fz30 p1757302159">{{ item.manager_name }}</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="common-empty" v-if="tableData.length === 0 && isOnce">
                <uv-empty mode="data" />
              </div>
              <div v-if="tableData.length" class=" p1757319276">
                <uv-load-more fontSize="28rpx" class="" :status="status" />
              </div>
            </scroll-view>

          </div>
        </template>
        <template v-slot:footer>
        </template>
      </u-my-layOut>
    </div>
  </div>
</template>

<script>
import myInputVue from './components/myInput.vue'
import myLayOutVue from './components/layOut.vue'
import { merchantList } from '@/api/community.js'
import commonMixin from './mixin/common.js'
export default {
  components: {
    'u-my-layOut': myLayOutVue,
    'u-my-input': myInputVue
  },
  mixins: [commonMixin],
  data() {
    return {
      form: {
        keywords: '',
        page: 1,
        limit: 10,
        sort: 'community'
      },
      list: [{
        name: '按社区',
        sort: 'community'
      }, {
        name: '按让利金额',
        sort: 'rang_li_amount'
      }, {
        name: '按销售数据',
        sort: 'sales_amount'
      }],
    }
  },
  onShow() {
    this.initPage()
  },
  methods: {
    initPage(cb = () => { }) {
      this.isOnce = false
      if (this.form.page == this.current_page) return
      uni.showLoading({
        title: '加载中',
        mask: true
      })
      let form = JSON.parse(JSON.stringify(this.form))
      merchantList(form).then(res => {
        this.isRefreshing = false
        this.isOnce = true
        if (res.code === 200) {
          cb()
          uni.hideLoading()
          let data = res.result && res.result.data && JSON.parse(JSON.stringify(res.result.data))
          this.total = res.result.total
          this.current_page = res.result.current_page
          this.tableData = this.tableData.concat(data)
        }
      }).catch(() => {
        uni.hideLoading()
        this.isRefreshing = false
        this.isOnce = true
      })
    },
  },
}
</script>
<style>
page {
  background-color: #F7F8F8;
  color: #333333;
}
</style><style lang="scss" scoped>
@import "./common.scss";
.bg {
  top: 0;
  left: 0;
  position: absolute;
  width: 100vw;
  z-index: 1;
}

.p1757296779 {
  position: relative;
  z-index: 2;
  padding-left: 30rpx;
  padding-right: 30rpx;
}

.p1757298517 {
  background: #e60012;
  width: 90rpx;
  height: 50rpx;
  border-radius: 24rpx 24rpx 24rpx 24rpx!important;
  margin-top: 10rpx;
  margin-bottom: 10rpx;
  margin-right: 10rpx !important;
}

.p1757299303 {
  background: #ffffff;
  border-radius: 15rpx;
}

.p1757302886 {
  background: #ffffff;
  border-radius: 15rpx;
  box-shadow: 2rpx 2rpx 20rpx 2rpx #eeeeee;
  box-sizing: border-box;
  padding: 30rpx 20rpx;
  margin-bottom: 20rpx;
}

.p1757302879 {
  box-sizing: border-box;
  padding-left: 20rpx;

  .p1757299982 {
    font-weight: 500;
    flex-direction: column;
  }
}

.p1757302159 {
  font-weight: 500;
  color: #333;
  display: inline;
  padding-left: 10rpx;
}

.p1757318941 {
  font-size: 26rpx !important;
  border-radius: 30rpx !important;
  font-weight: 400 !important;
  color: #c9caca !important;
  border: 2rpx solid #c9caca !important;
  background-color: #fff;
  padding: 5rpx 20rpx !important;
  margin-left: 20rpx !important;
  margin-top: 10rpx !important;
}
</style>
